<template>
  <el-dialog
    :model-value="showLinkDialog"
    width="900"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <template #header>
      <p style="color: black; font-weight: bold">链接选择器</p>
    </template>
    <div class="line"></div>
    <div v-loading="linkLoading" class="dialog-content">
      <el-tabs v-model="activeName" tab-position="left">
        <el-tab-pane label="基础页面" name="1" v-if="props.linkType !== 'exam'">
          <div v-for="(item, index) in linkTypeData" :key="index">
            <div style="color: #000; margin-bottom: 10px; font-weight: bold">{{ item.name }}</div>
            <div class="link-list">
              <div
                class="link-item"
                v-for="(link, linkIndex) in item.children"
                :key="linkIndex"
                :class="{ active: selectedId === link.id }"
                @click="handleSelectLink(link)"
              >
                {{ link.name }}
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="考试专栏" name="6">
          <div class="link-list">
            <div
              class="link-item"
              v-for="(group, linkIndex) in examTableData"
              :key="linkIndex"
              :class="{ active: activeGroup === group.pageUrlType }"
              @click="handleSelectGroup(group)"
            >
              {{ group.name }}
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="自定义页面" name="2">
          <el-table :data="customData" @row-click="handleSelectLink">
            <el-table-column prop="name" label="页面名称" />
            <el-table-column prop="name" label="页面类型">
              <template #default> 自定义页面 </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" />
            <el-table-column prop="name" label="操作">
              <template #default="scope">
                <div class="select-button" :class="{ active: scope.row.id === selectCustomId }"
                  @click="setActive(scope.row.id)">
                  {{ scope.row.id === selectCustomId ? '已选' : '选择' }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane> -->
        <el-tab-pane label="拨打电话" name="4">
          <div style="display: flex; align-items: center">
            <p>手机号:</p>
            <el-input
              v-model.trim="linkPhone"
              style="width: 500px; margin-left: 20px"
              placeholder="请输入手机号"
            ></el-input>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="H5跳转" name="3">
          <div style="display: flex; align-items: center">
            <p>网页URL:</p>
            <el-input style="width: 500px; margin-left: 20px"></el-input>
          </div>
          <p style="margin-left: 90px; margin-top: 20px">需https://开头，小程序需设置业务域名</p>
        </el-tab-pane>
        <el-tab-pane label="小程序跳转" name="5">
          <el-form label-width="auto" label-position="right">
            <el-form-item label="小程序APP ID：">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="小程序路径：">
              <el-input></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane> -->
      </el-tabs>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog" style="margin-right: 6px">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  const route = useRoute()

  const props = defineProps({
    showLinkDialog: {
      type: Boolean,
      default: false
    },
    linkType: {
      type: String
    }
  })

  const emit = defineEmits(['closeDialog'])

  const basePageData = ref([
    {
      id: '4002',
      name: '首页',
      pageType: 'tabBar',
      routePath: 'pages/drivingSchool/drive',
      children: [],
      type: 1
    },
    {
      id: '4009',
      name: '考试答题页',
      pageType: 'tabBar',
      routePath: 'pages/exam/exam',
      children: [],
      type: 1
    },
    {
      id: '4021',
      name: '会员卡',
      pageType: 'tabBar',
      routePath: 'pages/exam/vipCourse',
      children: [],
      type: 1
    },
    {
      id: '4035',
      name: '考试成绩',
      pageType: 'tabBar',
      routePath: 'pages/exam/myGrades',
      pageUrlType: '12',
      children: [],
      type: 1
    },
    {
      id: '4003',
      name: '个人中心',
      pageType: 'tabBar',
      routePath: 'pages/user/user',
      children: [],
      type: 1
    },
    {
      id: '4039',
      name: '我的优惠券',
      pageType: 'custom',
      routePath: 'pages/user/components/coupon',
      children: [],
      type: 1
    },
    {
      id: '4036',
      name: '图文列表',
      pageType: 'custom',
      routePath: 'pages/imageText/list',
      children: [],
      type: 1
    },
    {
      id: '4045',
      name: '订单中心',
      pageType: 'custom',
      routePath: 'pages/user/components/order',
      children: [],
      type: 1
    },
    {
      id: '4034',
      name: '班型订单',
      pageType: 'custom',
      routePath: 'pages/order/packageOrder',
      children: [],
      type: 1
    },
    {
      id: '4037',
      name: '会员订单',
      pageType: 'custom',
      routePath: 'pages/order/vipOrder',
      children: [],
      type: 1
    },
    {
      id: '4031',
      name: '车型切换',
      pageType: 'custom',
      routePath: 'pages/carType/list',
      children: [],
      type: 1
    },
    {
      id: '4010',
      name: '关于我们',
      pageType: 'custom',
      routePath: 'pages/user/components/about',
      children: [],
      type: 2
    },
    {
      id: '4033',
      name: '联系我们',
      pageType: 'custom',
      routePath: 'pages/user/components/contact',
      children: [],
      type: 2
    },
    {
      id: '4015',
      name: '在线客服',
      pageType: 'customer',
      routePath: '',
      children: [],
      type: 2
    },
    {
      id: '4004',
      pageType: 'custom',
      name: '帮助中心',
      routePath: 'pages/user/components/helpCenter',
      children: [],
      type: 2
    },
    {
      id: '4005',
      pageType: 'custom',
      name: '用户设置',
      routePath: 'pages/user/components/setting',
      children: [],
      type: 2
    },
    {
      id: '4040',
      pageType: 'modal',
      name: '客服群',
      routePath: 'qrcode',
      children: [],
      type: 2
    },
    {
      id: '4016',
      name: '驾校简介',
      pageType: 'custom',
      routePath: 'pages/customPage/index',
      children: [],
      type: 3
    },
    {
      id: '4017',
      name: '驾校导航',
      pageType: 'map',
      routePath: '',
      children: [],
      type: 3
    },
    {
      id: '4018',
      name: '班型列表',
      pageType: 'custom',
      routePath: 'pages/classDetail/classList',
      children: [],
      type: 3
    },
    {
      id: '4019',
      name: '教练列表',
      pageType: 'custom',
      routePath: 'pages/coach/index',
      children: [],
      type: 3
    },
    {
      id: '4020',
      name: '训练场列表',
      pageType: 'custom',
      routePath: 'pages/trainingGroundDetail/index',
      children: [],
      type: 3
    },
    {
      id: '4032',
      name: '兑换码',
      pageType: 'custom',
      routePath: 'pages/user/components/redemptionCode',
      children: [],
      type: 4
    },
    {
      id: '4022',
      name: '领券中心',
      pageType: 'custom',
      routePath: 'pages/coupon/list',
      children: [],
      type: 4
    },
    {
      id: '4023',
      name: '分销中心',
      pageType: 'distribution',
      routePath: 'pages/distribution/index',
      children: [],
      type: 4
    },
    {
      id: '4041',
      name: '分享海报',
      pageType: 'distribution',
      routePath: 'pages/distribution/components/promotionalPoster',
      children: [],
      type: 4
    },
    {
      id: '4042',
      name: '老带新',
      pageType: 'custom',
      routePath: 'pages/inviteFriends/index',
      children: [],
      type: 4
    },
    {
      id: '4043',
      name: '直播课',
      pageType: 'custom',
      routePath: 'pages/shortVideo/index',
      children: [],
      type: 4
    },
    // {
    //   id: '4024',
    //   name: '视频课程详情',
    //   pageType: 'custom',
    //   routePath: 'pages/videoCourse/index',
    //   children: []
    // },
    {
      id: '4025',
      name: '如何约考',
      pageType: 'custom',
      routePath: 'pages/examRelated/scheduleExam',
      children: [],
      type: 3
    },
    {
      id: '4026',
      name: '如何查成绩',
      pageType: 'custom',
      routePath: 'pages/examRelated/checkGrades',
      children: [],
      type: 3
    },
    {
      id: '4027',
      name: '考试简介',
      pageType: 'custom',
      routePath: 'pages/examRelated/examSubjectMaterials',
      pageUrlType: '01',
      children: [],
      type: 3
    },
    {
      id: '4028',
      name: '考试流程',
      pageType: 'custom',
      routePath: 'pages/examRelated/examSubjectMaterials',
      pageUrlType: '02',
      children: [],
      type: 3
    },
    {
      id: '4029',
      name: '考试准备',
      pageType: 'custom',
      routePath: 'pages/examRelated/examSubjectMaterials',
      pageUrlType: '03',
      children: [],
      type: 3
    },
    {
      id: '4030',
      name: '注意事项',
      pageType: 'custom',
      routePath: 'pages/examRelated/examSubjectMaterials',
      pageUrlType: '04',
      children: [],
      type: 3
    }
  ])

  const customData = ref([
    {
      id: 1,
      name: '未命名页面1',
      pageType: 'custom',
      routePath: 'pages/user/user',
      updateTime: '2025-07-23'
    },
    {
      id: 2,
      name: '未命名页面2',
      pageType: 'custom',
      routePath: 'pages/user/user',
      updateTime: '2025-07-23'
    }
  ])

  const examTableData = ref([
    {
      name: '顺序练习',
      pageType: 'custom',
      pageUrlType: '13',
      routePath: 'pages/questionBank/question'
    },
    {
      name: '模拟考试',
      pageType: 'custom',
      pageUrlType: '03',
      routePath: 'pages/questionBank/mockExamSet'
    },
    {
      name: '视频课程',
      pageType: 'custom',
      pageUrlType: '02',
      routePath: 'pages/exam/components/vipVideoCourse'
    },
    {
      name: '精选题库',
      pageType: 'custom',
      pageUrlType: '01',
      routePath: 'pages/exam/components/featuredQuestion'
    },
    {
      name: '图标技巧',
      pageType: 'custom',
      pageUrlType: '08',
      routePath: 'pages/exam/components/iconSkills'
    },
    {
      name: '专项练习',
      pageType: 'custom',
      pageUrlType: '05',
      routePath: 'pages/exam/components/specializedExercises'
    },
    {
      name: '考前密卷',
      pageType: 'custom',
      pageUrlType: '07',
      routePath: 'pages/exam/components/secretPapers'
    },
    {
      name: '真实考场',
      pageType: 'custom',
      pageUrlType: '11',
      routePath: 'pages/realExam/index'
    },
    // {
    //   name: '视频课程管理',
    //   pageType: 'custom',
    //   pageUrlType: '02',
    //   routePath: 'pages/exam/components/vipCourse'
    // },
    {
      name: '技巧刷题',
      pageType: 'custom',
      pageUrlType: '04',
      routePath: 'pages/exam/components/skillPracticeQuestion'
    },
    {
      name: '章节练习',
      pageType: 'custom',
      pageUrlType: '06',
      routePath: 'pages/exam/components/stageByStagePractice'
    },
    // {
    //   name: '三力考试',
    //   pageType: 'custom',
    //   pageUrlType: '09'
    // },
    {
      name: '错题/收藏',
      pageType: 'custom',
      pageUrlType: '10',
      routePath: 'pages/exam/components/errorBook'
    },
    {
      name: '我的成绩',
      pageType: 'tabBar',
      routePath: 'pages/exam/myGrades',
      pageUrlType: '12'
    }
  ])

  const linkLoading = ref(false)
  const selectedId = ref('4001')
  const selectLinkData = ref()
  const activeName = ref('1')
  const selectCustomId = ref()
  const activeGroup = ref()
  const linkPhone = ref()

  const linkTypeData = ref<any[]>([])

  function groupBy<T extends Record<string, any>, K extends keyof T>(
    objectArray: T[],
    property: K
  ): Record<string, T[]> {
    return objectArray.reduce(
      (acc, obj) => {
        const key = String(obj[property])
        const curGroup = acc[key] ?? []
        return { ...acc, [key]: [...curGroup, obj] }
      },
      {} as Record<string, T[]>
    )
  }

  function handleSelectLink(item: any) {
    selectedId.value = item.id
    selectLinkData.value = item
  }

  function closeDialog() {
    emit('closeDialog')
  }

  function handleConfirm() {
    if (activeName.value === '4') {
      let obj = {
        name: `tel: ${linkPhone.value}`,
        pageType: 'phone',
        routePath: linkPhone.value
      }
      emit('closeDialog', obj)
      return
    }

    selectLinkData.value.pageValue = route.query.pageValue
    emit('closeDialog', selectLinkData.value)
  }

  function handleSelectGroup(item: any) {
    activeGroup.value = item.pageUrlType
    selectLinkData.value = item
  }

  function setActive(id: any) {
    if (selectCustomId.value === id) {
      selectCustomId.value = ''
    } else {
      selectCustomId.value = id
    }
  }

  onMounted(() => {
    const groupData = groupBy(basePageData.value, 'type')
    for (let key in groupData) {
      let obj: any = {
        1: '基础功能',
        2: '系统设置',
        3: '驾校专栏',
        4: '营销功能'
      }
      linkTypeData.value.push({
        name: obj[key],
        children: groupData[key]
      })
    }
    if (props.linkType === 'exam') {
      activeName.value = '6'
    }
  })
</script>

<style scoped lang="scss">
  .link-list {
    display: flex;
    flex-wrap: wrap;

    .link-item {
      border: 1px solid #f4f5f8;
      border-radius: 12px;
      padding: 10px 0;
      margin: 0 16px 16px 0;
      color: black;
      font-size: 14px;
      font-weight: normal;
      line-height: 20px;
      cursor: pointer;
      width: 120px;
      text-align: center;

      &:hover {
        border: 1px solid var(--el-color-primary);
      }
    }

    .link-item.active {
      background-color: var(--el-color-primary);
      color: #fff;
    }
  }

  .select-button {
    display: inline-block;
    padding: 6px 24px;
    border: 1px solid var(--el-color-primary);
    border-radius: 12px;
    color: var(--el-color-primary);
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
  }

  .select-button.active {
    background-color: var(--el-color-primary);
    color: white;
  }

  .dialog-content {
    height: 500px;
    overflow: auto;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: #f0f0f0;
    margin-top: -20px;
    margin-bottom: 30px;
  }
</style>
